<script type="text/javascript">
	var chart;
	jQuery(document).ready(function() {
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'os_report',
				plotBackgroundColor: null,
				plotBorderWidth: null,
				theme: 'grid',
				plotShadow: false
			},
			title: {
				text: 'Computer by OS'
			},
			tooltip: {
				formatter: function() {
					return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
				}
			},
			plotOptions: {
		         pie: {
		            allowPointSelect: true,
		            cursor: 'pointer',
		            dataLabels: {
		               enabled: false
		            },
		            showInLegend: true
		         }
			},
		    series: [{
				type: 'pie',
				name: 'Browser share',
				data: [
					<% for computer in @computer_os_counts %>
						<%= "['#{computer[:os]}',#{computer[:count]}],"%>
					<%end%>
				]
			}]
		});
	});
		
</script>

<div id="os_report" style="width: 500px; height: 300px; margin: 0 auto"></div>